<template>
	<view>
		<view class="p-20px pb-0px color-white">推荐数据</view>
		<view class="p-20px pb-120px">
			<view class="mt-20px">
				<uv-search placeholder="请输入手机号搜索" v-model="state.search" :showAction="false"></uv-search>
			</view>

			<view v-if="state.cardList && state.cardList.length">
				<BigCountNum title='您当前活动人数(人)' :count='10960'>
				</BigCountNum>

				<view class="p-20px mb-20px bg-white rounded-20px" v-for="item in state.cardList" :key="item">
					<view class="flex text-24px">
						<uv-avatar :src="item.src"></uv-avatar>
						<view class="flex-1 ml-10px">
							<view>{{item.name}}</view>
							<view class="flex my-10px">
								<view class="w-1-2">
									<text>归属员工:</text>
									<text>{{item.ownership}}</text>
								</view>
								<view>
									<text>推荐人:</text>
									<text>{{item.referrer}}</text>
								</view>
							</view>
							<view>
								<text>手机号:</text>
								<text>{{item.phone}}</text>
							</view>
						</view>
					</view>

					<uv-line margin="20rpx 0"></uv-line>

					<view class="h-100px flex flex-x-around">
						<view>
							<view class="mb-10px">已支付 <text class="color-pink">{{item.paid}}</text>人</view>
							<uv-button type="primary" shape="circle" text="查看推荐明细" size="mini"
								@click="gotoRecommendedDataInfo(0)"></uv-button>
						</view>
						<uv-line direction="col" length="70%" margin="5px 0"></uv-line>
						<view>
							<view class="mb-10px">未支付 <text class="color-pink">{{item.unpaid}}</text>人</view>
							<uv-button type="primary" shape="circle" text="查看推荐明细" size="mini"
								@click="gotoRecommendedDataInfo(1)"></uv-button>
						</view>
					</view>
				</view>

			</view>

			<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
		</view>
		<BackWorkSpace></BackWorkSpace>
	</view>
</template>

<script setup name="RecommendedData">
	import {
		reactive,
	} from 'vue';
	import BackWorkSpace from '@/components/BackWorkSpace.vue'
	import BigCountNum from '@/components/BigCountNum.vue'

	const state = reactive({
		search: '',
		cardList: [{
				id: 0,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '肖诗雨',
				ownership: '小倩倩我爱你',
				referrer: '赵易倩',
				phone: '13354313345',
				paid: 10,
				unpaid: 1,
			},
			{
				id: 1,
				src: 'https://via.placeholder.com/200x200.png/2878ff',
				name: '王劲松',
				ownership: '小倩倩我爱你',
				referrer: '赵易倩',
				phone: '13354313345',
				paid: 10,
				unpaid: 1,
			},
			{
				id: 2,
				src: 'https://cdn.uviewui.com/uview/album/3.jpg',
				name: '王萌萌',
				ownership: '小倩倩我爱你',
				referrer: '赵易倩',
				phone: '13354313345',
				paid: 10,
				unpaid: 1,
			},
		]
	})

	const gotoRecommendedDataInfo = (currentTab) => {
		uni.$uv.route({
			url: '/pages/RecommendedDataInfo/RecommendedDataInfo',
			params: {
				pageType: 1,
				currentTab
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: rgb(61, 114, 255);
	}
</style>